<template>
  <!-- 首页正文 start -->
  <!-- 首页分类列表 start -->
  <div class="films-box">
    <div class="list-name">
      <span>热门电影</span>
    </div>
    <div class="content-list">
      <!-- 电影展示组件 start -->
      <!--  -->
      <conten v-for="(film,i) in films" :key="'films'+i" :film="film"></conten>
      <!-- 电影展示组件 end -->
    </div>
  </div>
  <!-- 首页分类列表 end -->

  <!-- 首页正文 end -->
</template>
<script>
import conten from "../components/conten";
export default {
  props:["search"],
  data(){
    return {
      films:[],
      // search:''
    }
  },
  components: {
    conten
  },
  methods:{
    loadFilmData(params){
      this.$api.loadFilmsByParams(params)
    .then((data)=>{
      
      if(data.resultState){
        this.films=data.result;
      }
    })
    .catch(()=>{
      
      })
  }
  },
  watch:{
    search(nv){
      this.loadFilmData({
        seach:nv,
        size:20
      })
    }
  },
  mounted(){
    // this.$root.$on("updateSearch",(arg)=>{
    //     this.search = arg;
    // })
    this.loadFilmData({
      typeId:10001,
      size:20
    });
  }
};
</script>

<style lang="less" scoped>
.films-box{
    position: absolute;
    top: 0rem;
    bottom: 0rem;
    left: 0rem;
    right: 0rem;
    overflow-y: auto;
}
.content-list{
    display: flex;
    flex-flow: row wrap;
    justify-content: left;
    width: 100%;
    font-size: 0rem;
    >*{
        margin-top: 0.2rem;
    }
}
</style>
